<template>
<el-container>
  <el-main>
    
        <el-row :gutter="10">
            <el-col :span="2" style="border:1px solid rgba(255, 255, 255, 0.2)">

            </el-col>
            <el-col :span="20">
                <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                    <div slot="header" class="clearfix">
                        <span>留言</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <div class="text item">
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <el-card class="box-card"> 
                                    <el-carousel height="150px">
                                        <el-carousel-item v-for="item in 4" :key="item">
                                           
                                        </el-carousel-item>
                                    </el-carousel>                                 
                                </el-card>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" style="margin-top:10px;font-size: 15px;">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <strong>留言须知：</strong>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10">
                                    <el-col :span="1" style="display: flex; justify-content: flex-end;">
                                        <span style="font-size: 20px;" class="iconfont icon-tishi"></span>
                                    </el-col>
                                    <el-col :span="23">
                                        <span>随便留言，只要不是色情、广告、反人类、反国家的危险言论。<strong>本站具有留言审核机制，后续会开发ip黑名单功能！</strong>

                                        </span>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10">
                                    <el-col :span="1" style="display: flex; justify-content: flex-end;">
                                        <span style="font-size: 20px;" class="iconfont icon-tishi"></span>
                                    </el-col>
                                    <el-col :span="23">
                                        <span>
                                            欢迎各种花式留言！e.g.一给我里GiaoGiao!
                                        </span>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10">
                                     <el-col :span="1" style="display: flex; justify-content: flex-end;">
                                        <span style="font-size: 20px;" class="iconfont icon-zan"></span>
                                    </el-col>
                                    <el-col :span="23">
                                        <span>
                                            欢迎灌水、抢沙发。
                                        </span>
                                    </el-col>
                                </el-row>                             
                            </el-col>
                        </el-row>
                        <div v-bind:style="{display:ADDISPLAYMESSAGE,'margin-top':'10px'}">    
                            <el-card class="box-card">                     
                            <el-row :gutter="10">
                                <el-col :span="24">
                                    <!-- <el-card class="box-card"> -->
                                        <el-input
                                            type="textarea"
                                            :autosize="{ minRows: 2, maxRows: 4}"
                                            placeholder="邮箱内容不会公开，只作为回复的联系方式"
                                            v-model="textarea1">
                                        </el-input>

                                    <!-- </el-card> -->
                                </el-col>
                            </el-row>                        
                            <el-row :gutter="10" style="margin-top:10px">
                                <el-col :span="24">
                                    <!-- <el-card class="box-card"> -->
                                        <el-row :gutter="10">
                                            <el-col :span="8">
                                                <el-input
                                                prefix-icon="el-icon-user-solid"
                                                placeholder="输入你的昵称"
                                                v-model="input"
                                                show-password>

                                                </el-input>                                        
                                            </el-col> 
                                            <el-col :span="8">
                                                <el-input
                                                prefix-icon="el-icon-message"
                                                placeholder="输入你的邮箱"
                                                v-model="input"
                                                show-password>

                                                </el-input>                                          
                                            </el-col>   
                                            <el-col :span="8">
                                                <el-button type="primary"  style="width: 100%;">提交</el-button>
                                            </el-col>      
                                        </el-row>                                
                                    <!-- </el-card> -->
                                </el-col>
                            </el-row>
                            </el-card>
                        </div>
                        <el-row :gutter="10" style="margin-top:10px;">
                            <el-col :span="24">
                                <el-card class="box-card">

                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <el-row :gutter="10">
                                                <el-col :span="24">
                                                    <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn</span>&nbsp;<el-tag type="danger">标签五</el-tag>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2);font-size: 12px; color: #909399">
                                                                    <span class="iconfont icon-riqi2"></span><span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <p>不错嘛</p>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="10" style="margin-top:5px;font-size: 12px; color: #909399">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span @click="reply" class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18" style="display: flex; justify-content: flex-end; align-items: center;">        
                                                            <span @click="cancelReply" :style="{display:DISPLAYCANCELREPLY}" class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row> 
                                                    <div v-bind:style="{display:DISPLAYMESSAGE}">
                                                        <el-row :gutter="10" style="margin-top:10px">                                                   
                                                            <el-col :span="24" >                                                  
                                                                <el-row :gutter="10" style="margin-top:10px">
                                                                    <el-col :span="24" >                                                                                                        
                                                                        <el-input
                                                                        type="textarea"
                                                                        placeholder="请输入内容"
                                                                        v-model="textarea"
                                                                        maxlength="30"
                                                                        show-word-limit
                                                                        >
                                                                        </el-input>                                                       
                                                                    </el-col>
                                                                </el-row>  
                                                                <el-row :gutter="10" style="margin-top:10px">
                                                                    <el-col :span="24" >                                                
                                                                    <el-button type="primary"  style="width: 100%;">提交评论</el-button>                                                        
                                                                    </el-col>                                                           
                                                                </el-row>  
                                                            </el-col>                                                                           
                                                        </el-row> 
                                                    </div>                                                                                                 
                                                </el-col>
                                            </el-row>
                                            <el-divider></el-divider>
                                            <el-row :gutter="10" style="margin-top:10px">
                                                <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">

                                                </el-col> -->
                                                <el-col :span="23 ">                                            
                                                <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn @ ksd</span>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                                    <span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <span>不错嘛</span>
                                                        </el-col>
                                                    </el-row>
                                                <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18"  style="display: flex; justify-content: flex-end; align-items: center;">        
                                                            <span class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row>            
                                                </el-col>
                                            </el-row>
                                            <el-divider></el-divider>

                                            <el-row :gutter="10" style="margin-top:10px">
                                                <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">

                                                </el-col> -->
                                                <el-col :span="23 ">                                            
                                                <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn</span>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                                    <span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <span>不错嘛</span>
                                                        </el-col>
                                                    </el-row>
                                                <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18" style="display: flex; justify-content: flex-end; align-items: center;" >        
                                                            <span class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row>              
                                                </el-col>
                                            </el-row>


                                        </el-col>
                                    </el-row>

                                    <el-divider></el-divider>


                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <el-row :gutter="10">
                                                <el-col :span="24">
                                                    <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn</span>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                                    <span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <p>不错嘛</p>
                                                        </el-col>
                                                    </el-row>
                                                <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18" style="display: flex; justify-content: flex-end; align-items: center;" >        
                                                            <span class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row>                                                
                                                </el-col>
                                            </el-row>

                                            <el-divider></el-divider>

                                            <el-row :gutter="10" style="margin-top:10px">
                                                <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">

                                                </el-col> -->
                                                <el-col :span="23 ">                                            
                                                <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn</span>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                                    <span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <span>不错嘛</span>
                                                        </el-col>
                                                    </el-row>
                                                <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18" style="display: flex; justify-content: flex-end; align-items: center;">        
                                                            <span class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row>            
                                                </el-col>
                                            </el-row>

                                            <el-divider></el-divider>

                                            <el-row :gutter="10" style="margin-top:10px">
                                                <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">

                                                </el-col> -->
                                                <el-col :span="23 ">                                            
                                                <el-row :gutter="10" style="display: flex; align-items: center;">
                                                        <el-col :span="1">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <el-avatar size="small" :src="circleUrl"></el-avatar>
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="23">
                                                            <el-row :gutter="10">
                                                                <el-col :span="24">
                                                                    <span>wn</span>                                                              
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">                                                           
                                                                <el-col :span="24" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                                    <span>2021-05-26</span>
                                                                </el-col>
                                                            </el-row>                                                           
                                                        </el-col>                                             
                                                    </el-row>
                                                    <el-row :gutter="10" style="font-size: 12px">
                                                        <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col>
                                                        <el-col :span="23" >
                                                            <span>不错嘛</span>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="10" style="margin-top:5px;font-size: 12px">
                                                        <!-- <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
                                                        </el-col> -->
                                                        <el-col :span="2" >                                                  
                                                            <span class="iconfont icon-zan1">赞(2)</span>  
                                                        </el-col>
                                                        <el-col :span="2" >                                                
                                                            <span class="iconfont icon-cai">踩(3)</span>                                                         
                                                        </el-col>
                                                        <el-col :span="2" >        
                                                            <span class="iconfont icon-icon_reply">回复</span>                                            
                                                        </el-col>
                                                        <el-col :span="18" style="display: flex; justify-content: flex-end; align-items: center;">        
                                                            <span class="iconfont icon-icon_reply">取消回复</span>                                            
                                                        </el-col>
                                                    </el-row>              
                                                </el-col>
                                            </el-row>


                                        </el-col>
                                    </el-row>

                                    <el-divider></el-divider>

                                <el-row :gutter="12">
                                        <el-col :span="24">
                                            <el-row :gutter="10">
                                                <el-col :span="4">
                                                    <el-button>上一页</el-button>
                                                </el-col>
                                                <el-col :span="16">
                                                    <el-pagination
                                                    @size-change="handleSizeChange"
                                                    @current-change="handleCurrentChange"
                                                    :current-page.sync="currentPage3"
                                                    :page-size="100"
                                                    layout="prev, pager, next, jumper"
                                                    :total="1000">
                                                    </el-pagination>
                                                    
                                                </el-col>
                                                <el-col :span="4">
                                                    <el-button>下一页</el-button>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>   
                                    
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

            </el-col>
            <el-col :span="2" style="border:1px solid rgba(255, 255, 255, 0.2)">

            </el-col>
        </el-row>
       

  </el-main>
</el-container>

</template>
<script>
export default{
    name:'Mesaage',
    data(){
        return{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            textarea1:'',
            input:'',
            currentPage3:5,
            textarea: '',
            DISPLAYMESSAGE:'none',
            DISPLAYCANCELREPLY:'none',
            ADDISPLAYMESSAGE:'block',
            
        }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //提交评论
        reply:function(){
            this.DISPLAYMESSAGE='block';
            this.DISPLAYCANCELREPLY='block';
            this.ADDISPLAYMESSAGE='none'

        },
        //取消评论
        cancelReply:function(){
            this.DISPLAYMESSAGE='none';
            this.DISPLAYCANCELREPLY='none';
            this.ADDISPLAYMESSAGE='block'
        }
    }
}
</script>
<style scoped>
.el-main {
    background-color:rgba(255, 255, 255, 0.2);
    color: #333;
}
.el-card{
 background-color:rgba(255, 255, 255, 0.5);
}
.iconfont{
    cursor: pointer;
}


.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>